<style>
    * {
        box-sizing: border-box;
    }

    .selectElement {
        border: 1px solid #fb6638;
    }

    .selected {
        border: 1px solid #f00;
    }

    .left-container {
        width: 295px;
        background: #fff;
        height: 100%;
        padding-right: 20px;
    }

    .center-container {
        /* display: flex; */
        background: #F2F2F6;
        flex: 1;
        border-radius: 10px 10px 0px 0px;
        position: relative;
    }

    .decorate-center-container::-webkit-scrollbar {
        width: 0px
    }

    .app-web::-webkit-scrollbar {
        width: 0px
    }
    .decorate-left::-webkit-scrollbar {
        width: 0px
    }

    #decorateApp {
        /* display: flex; */
        /* background: #fff; */
    }

    .partTitle1 {
        width: 100%;
        height: 64px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(44, 59, 66, 1);
        line-height: 64px;
    }


    .partTitle2 {
        width: 100%;
        height: 64px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(44, 59, 66, 1);
        line-height: 64px;
        padding: 0 17px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        display: flex;
        justify-content: space-between;
        background: #fff;
        padding: 0 15px;
        align-items: center;
        margin-bottom: 10px;
    }

    .partTitle2-right {
        display: flex
    }

    .wechart {
        width: 90px;
        height: 34px;
        border: 1px solid rgba(101, 208, 188, 1);
        border-radius: 2px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(24, 187, 156, 1);
        line-height: 34px;
        margin-left: 8px;
        text-align: center;
        position: relative;
    }

    .wechartHover {
        position: absolute;
        width: 160px;
        height: 169px;
        display: none;
        top: 56px;
        right: 14px;
        z-index: 10000;

    }

    .wechartHover-horn {
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent #fff transparent;
        position: absolute;
        right: 45px;
        top: -10px;
    }

    #qrcode {
        width: 141px;
        height: 141px;
        margin: 9px 9px 9px;
        background: #fff;
        border: 1px solid rgba(238, 238, 238, 1);
        box-shadow: 0px 6px 11px 2px rgba(186, 186, 186, 0.34);
    }

    .play-con {
        width: 90px;
        height: 34px;
        background: #f39c12;
        border-radius: 2px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 34px;
        text-align: center;
        margin-left: 10px;
    }

    .partTitle3 {
        width: 100%;
        height: 64px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(44, 59, 66, 1);
        line-height: 64px;
    }

    .decorate-left {
        box-sizing: border-box;
        height: calc(100vh - 195px);
    overflow: auto;

    }

    .decorate-left>div {
        margin: 10px 0;
    }

    .decorate-left-title {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 44px;
        height: 44px;
        background: #F7F7FA;
        padding-left: 16px;
        box-sizing: border-box;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
    }

    .decorate-left-con {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #eee;
        padding-left: 8px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .decorate-left-con:nth-child(3n) {
        margin-right: 0;
    }

    .decorate-center {
        flex: 1;
        display: flex;
        justify-content: center;
        height: 100%;
    }

    .drog-title {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .decorate-link {
        text-align: center;
        border-radius: 0;
        color: #444444;
        font-size: 12px;
        padding: 10px 0 10px;
        float: left;
        cursor: pointer;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        width: 75px;
        height: 75px;
        margin: 8px 8px 8px 0px;
        border: 1px solid #eee;
        background: #F7F7FA;
        border-radius: 4px;
    }

    .decorate-link>img {
        width: 30px;
        height: 30px;
        margin-bottom: 10px;
    }

    .app-web {
        width: 375px;
        height: 100%;
        background: #eee;
        margin: 0 20px;
        overflow: auto;

    }

    .carousel-style {
        width: 100%;
        height: 172px;
        background: rgba(49, 49, 49, 1);
        position: relative;
    }

    .cube-style {
        height: 153px;
        background: #eee;
        position: relative;
    }

    .cube-style img {
        width: 100%;
        height: 100%;
    }

    .classify-style img {
        width: 100%;
        height: 100%;
    }

    .carousel-style img {
        width: 100%;
        height: 100%;
    }

    .style-posi-del {
        position: absolute;
        top: 0;
        right: 0;
        color: #f00;
        width: 20px;
        height: 20px;
        text-align: right;
    }

    .carousel-style-posi {
        position: absolute;
        bottom: 5px;
        left: 50%;
        margin-left: -100px;
        display: flex;
        width: 200px;
        justify-content: center;
    }

    .carousel-style-dot {
        width: 7px;
        height: 7px;
        background: rgba(255, 255, 255, 1);
        border-radius: 50%;
        margin: 0 5px;
    }

    .carousel-style-dot:first-child {
        background: #A8700D;
    }

    .decorate-right {
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
    }

    .decorate-right-item {
        padding: 20px 16px;
        font-size: 12px;
    }

    .item-title {
        padding: 8px 10px;
    }

    .item-title img {
        width: 34px;
        height: 34px;
        margin-right: 18px;

    }

    .item-title-span {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
    }

    .select-style {
        margin: 10px;
    }

    .select-style-con {
        background: #f6f7f9;
        border: 1px solid #eee;
        color: #999;
        position: relative;
    }

    .select-style-con>img {
        width: 100%;
        height: 100%;
    }

    .select-style-con>a {
        left: 0;
        font-size: 14px;
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: center;
        background: rgba(0, 0, 0, .3);
        color: #fff;
        cursor: pointer;
        z-index: 99;
    }

    .decorate-center-container {
        /* width: 360px; */
        height: calc(100vh - 205px);
        /* width: 100%; */
        overflow-y: auto;
        background: #fff;
    }

    .item {
        text-align: center;
        position: relative;

    }

    .item img {
        width: 100%;
        height: 100%;
    }

    .item-posi {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #fff;
        line-height: 20px;
        text-align: center;
        background: #f00;
    }

    .itemRight-rela {
        position: relative;
    }

    .itemRight-posi {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #fff;
        line-height: 20px;
        text-align: center;
        background: #f00;
    }

    .form-item {
        margin: 10px 0;
        padding: 15px 10px 0;
        border: 1px solid #eee;
        background: #f6f7f9;
    }

    .banner-add-btn {
        border: 1px dashed #6b7685;
        line-height: 32px;
        height: 32px;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
    }

    .btn-primary btn {
        background: rgba(233, 233, 233, 1);
        border: 1px solid rgba(238, 238, 238, 1);
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        width: 49px;
        height: 31px;
        line-height: 31px;
    }

    .right-container-iframe {
        display: flex;
        justify-content: center;
    }

    #preview {
        border: #eee 1px solid;
        padding: 10px;
        margin: 0 auto
    }

    .right-container {
        padding: 0 20px 20px;
        background: #fff;
        height: calc(100vh - 130px);
        /* width: 360px; */
    }

    .chooseAdvPic {
        height: 30px;
        background: rgba(0, 0, 0, 1);
        opacity: 0.3;
        width: 100%;
        bottom: 0;
        border: none;
    }

    .main-title {
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }

    .center-assembly {
        padding: 0;
    }

    .center-assembly-con {
        padding: 0;
        background: #fff;
        height: 620px;
    }

    #dosubmitBtn {
        width: 90px;
        margin-right: 10px;
    }

    [v-cloak] {
        display: none
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div id="decorateApp" v-cloak style="height: calc(100vh - 63px);   ">
        <input type="hidden" name="decorateContent" v-model="decorateContent">
        <input type="hidden" name="row[mode]" id="modeType">
        <!-- <div style="height: 66px;line-height: 66px;width: 100%;font-size:18px;
    font-family:Source Han Sans SC;
    font-weight:400;
    color:rgba(51,51,51,1);
    padding-left: 20px;">自定义装修</div> -->
        <div class="row" style="width: 100%;display: flex;padding: 0 20px;">
            <div class="col-sm-3 col-md-3 left-container">
                <div class="partTitle1">
                    工具箱选择
                </div>
                <div class="decorate-left">
                    <div v-for="(item,index) in toolsBox">
                        <div class="decorate-left-title">
                            <span>{{item.name}}</span>
                        </div>
                        <div class="decorate-left-con">
                            <div v-for="(ite,idx) in item.data" class="decorate-link"
                                @click.stop="selectTools(ite.type)">
                                <img :src="ite.image" alt="" srcset="">
                                <div>{{ite.name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-6 center-container" style="height: calc(100vh - 70px);   ">
                <div class="partTitle2">
                    <div class="partTitle1">拖拽编辑组件</div>
                    <div class="partTitle2-right">
                        <button type="button" class="btn btn-success btn-embossed" id="dosubmitBtn">保存</button>
                        <div class="play-con info" @click="goPreview()">预览</div>
                        <div class="wechart">二维码预览</div>
                        <div class="wechartHover">
                            <img id="qrcode" :src="qrcodeSrc">
                            <div class="wechartHover-horn"></div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin: 0;">
                    <div class="col-md-5 center-assembly">
                        <transition-group tag="div" class="decorate-center-container">
                            <div class="item" v-for="(item,index) in templateData" :key="item" draggable="true"
                                @dragstart="handleDragStart($event, item)"
                                @dragover.prevent="handleDragOver($event, item)"
                                @dragenter="handleDragEnter($event, item)" @dragend="handleDragEnd($event, item)"
                                @click.stop="showForm(index)">
                                <div class="drog-title">
                                    {{item.name}}
                                </div>
                                <img src="/assets/img/shopro/search_bg.png" v-if="item.type=='search'"
                                    :class="index==centerSelect?'selected':''">
                                <img src="/assets/img/shopro/banner_bg.png" v-if="item.type=='banner'"
                                    :class="index==centerSelect?'selected':''">
                                <img src="/assets/img/shopro/menu_bg.png" v-if="item.type=='menu'"
                                    :class="index==centerSelect?'selected':''">
                                <img src="/assets/img/shopro/adv_bg.png" v-if="item.type=='adv'"
                                    :class="index==centerSelect?'selected':''">
                                <img src="/assets/img/shopro/goods_bg.png" v-if="item.type=='goods-group'"
                                    :class="index==centerSelect?'selected':''">
                                <img src="/assets/img/shopro/goods_bg.png" v-if="item.type=='goods-list'"
                                    :class="index==centerSelect?'selected':''">
                                <img src="/assets/img/shopro/coupons_bg.png" v-if="item.type=='coupons'"
                                    :class="index==centerSelect?'selected':''">
                                <img src="/assets/img/shopro/groupon_bg.png" v-if="item.type=='groupon'"
                                    :class="index==centerSelect?'selected':''">
                                <img src="/assets/img/shopro/secKill_bg.png" v-if="item.type=='seckill'"
                                    :class="index==centerSelect?'selected':''">
                                    <img src="/assets/img/shopro/live_bg.png" v-if="item.type=='live'"
                                    :class="index==centerSelect?'selected':''">
                                <div v-show="index==centerSelect" class="item-posi" @click.stop="centerDel(index)">
                                    <i class="fa fa-close"></i>
                                </div>

                            </div>
                        </transition-group>
                    </div>
                    <div class="col-md-7 decorate-right decorate-center-container" v-if="centerSelect!=null">
                        <div class="decorate-right-item item-title">
                            <img src="/assets/img/shopro/search.png" v-if="templateForm.type=='search'" />
                            <img src="/assets/img/shopro/carousel.png" v-if="templateForm.type=='banner'" />
                            <img src="/assets/img/shopro/menu.png" v-if="templateForm.type=='menu'" />
                            <img src="/assets/img/shopro/adv_cube.png" v-if="templateForm.type=='adv'" />
                            <img src="/assets/img/shopro/classify.png" v-if="templateForm.type=='goods'" />
                            <img src="/assets/img/shopro/coupon.png" v-if="templateForm.type=='coupons'" />
                            <img src="/assets/img/shopro/assemble.png" v-if="templateForm.type=='groupon'" />
                            <img src="/assets/img/shopro/secKill.png" v-if="templateForm.type=='seckill'" />
                            <img src="/assets/img/shopro/live.png" v-if="templateForm.type=='live'" />
                            <span class="item-title-span">{{templateForm.name}}</span>
                        </div>
                        <div class="select-style" v-if="templateForm.type=='search'">
                            <div class="form-group">
                                <label for="c-avatar" class="control-label col-xs-12 col-sm-4">推荐搜索词:</label>
                                <div class="col-xs-10 col-sm-6">
                                    <input class="form-control" size="50" type="text" v-model="templateForm.content">
                                </div>
                            </div>

                        </div>
                        <!-- 轮播图 -->
                        <div class="select-style" v-if="templateForm.type=='banner'">

                            <div class="form-group main-title">
                                <label class="control-label col-xs-12 col-sm-3">名称:</label>
                                <div class="col-xs-12 col-sm-8">
                                    <input class="form-control" size="50" type="text" value=""
                                        v-model="templateForm.content.name">
                                </div>
                            </div>
                            <div class="form-item itemRight-rela" v-for="(item, index) in templateForm.content.list">
                                <div class="itemRight-posi" @click.stop="rightDel(index)">
                                    <i class="fa fa-close"></i>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">标题:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input class="form-control" size="50" type="text" value="" v-model="item.name">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">链接:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group">
                                            <input data-rule="" class="form-control" size="50" name="" type="text"
                                                value="" v-model="item.path_name" disabled>
                                            <div class="input-group-addon no-border no-padding">
                                                <button type="button" class="btn-primary btn choosePath"
                                                    :data-index="index">
                                                    选择
                                                </button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">图片:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group">
                                            <input data-rule="" class="form-control" size="50" name="" type="text"
                                                value="" v-model="item.image">
                                            <div class="input-group-addon no-border no-padding">
                                                <button type="button" class="btn-primary btn choosePicture"
                                                    :data-index="index">
                                                    选择
                                                </button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">背景色:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group">
                                            <input class="form-control" size="50" name="" type="text" value=""
                                                v-model="item.bgcolor">
                                            <div class="input-group-addon no-border no-padding">
                                                <input type="color" v-model="item.bgcolor">
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-12">
                                        <img :src="item.image" alt="" srcset="" style="width: 100%;height: 100%;">

                                    </div>
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-2"></label>
                                <div class="col-xs-12 col-sm-8">
                                    <div @click.stop="addForm('banner')" class="banner-add-btn">
                                        添加轮播图
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 菜单组 -->
                        <div class="select-style" v-if="templateForm.type=='menu'">
                            <div class="form-group main-title">
                                <label class="control-label col-xs-12 col-sm-3">名称:</label>
                                <div class="col-xs-12 col-sm-8">
                                    <input class="form-control" size="50" type="text" value=""
                                        v-model="templateForm.content.name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-3">样式:</label>
                                <div class="col-xs-12 col-sm-8">

                                    <div class="radio">
                                        <label for="row[status]-up"><input id="row[status]-up" type="radio"
                                                v-model="templateForm.content.style" value="4"
                                                :checked="templateForm.content.style === 4">4列</label>
                                        <label for="row[status]-hidden"><input id="row[status]-hidden"
                                                name="row[status]" type="radio" value="5"
                                                v-model="templateForm.content.style"
                                                :checked="templateForm.content.style === 5"> 5列</label>
                                    </div>

                                </div>
                            </div>
                            <div class="form-item itemRight-rela" v-for="(item, index) in templateForm.content.list">
                                <div class="itemRight-posi" @click.stop="rightDel(index)">
                                    <i class="fa fa-close"></i>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">标题:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input class="form-control" size="50" type="text" value="" v-model="item.name"
                                            placeholder="最多4个文字">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="c-avatar1" class="control-label col-xs-12 col-sm-3">链接:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group">
                                            <input data-rule="" class="form-control" size="50" name="" type="text"
                                                value="" v-model="item.path_name" disabled>
                                            <div class="input-group-addon no-border no-padding">
                                                <button type="button" class="btn-primary btn choosePath"
                                                    :data-index="index">
                                                    选择
                                                </button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="c-avatar" class="control-label col-xs-12 col-sm-3">图片:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group">
                                            <input data-rule="" class="form-control" size="50" name="" type="text"
                                                value="" v-model="item.image" placeholder="建议：小于10k正方形">
                                            <div class="input-group-addon no-border no-padding">
                                                <button type="button" class="btn-primary btn choosePicture"
                                                    :data-index="index">
                                                    选择
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-12">
                                        <img :src="item.image" alt="" srcset="" style="width: 100%;height: 100%;">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="c-avatar1" class="control-label col-xs-12 col-sm-2"></label>
                                <div class="col-xs-12 col-sm-8">
                                    <div @click.stop="addForm('menu')" class="banner-add-btn">
                                        添加菜单
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 广告魔方 -->
                        <div class="select-style" v-if="templateForm.type=='adv'">
                            <div class="form-group main-title">
                                <label class="control-label col-xs-12 col-sm-3">名称:</label>
                                <div class="col-xs-12 col-sm-8">
                                    <input class="form-control" size="50" type="text" value=""
                                        v-model="templateForm.content.name">
                                </div>
                            </div>
                            <div class="select-style-con">
                                <img :src="advStyleImage[templateForm.content.style - 1]">
                                <button class="chooseAdvPic">
                                    选择风格
                                </button>
                            </div>
                            <form class="form-horizontal form-box">
                                <div class="form-item" v-for="(item, index) in templateForm.content.list">
                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3">标题{{index+1}}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <input class="form-control" size="50" type="text" v-model="item.name">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3">链接:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="input-group">
                                                <input class="form-control" size="50" name="" type="text"
                                                    v-model="item.path_name" disabled>
                                                <div class="input-group-addon no-border no-padding">
                                                    <button type="button" class="btn-primary btn choosePath"
                                                        :data-index="index">
                                                        选择
                                                    </button>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3">图片:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="input-group">
                                                <input data-rule="" class="form-control" size="50" name="" type="text"
                                                    value="" v-model="item.image">
                                                <div class="input-group-addon no-border no-padding">
                                                    <button type="button" class="btn-primary btn choosePicture"
                                                        :data-index="index">
                                                        选择
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-xs-12 col-sm-12">
                                            <img :src="item.image" alt="" srcset="" style="width: 100%;height: 100%;">

                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="select-style" v-if="templateForm.type=='goods-group'">
                            <div class="form-item">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">名称:</label>
                                    <div class="col-xs-10 col-sm-8">
                                        <input class="form-control" size="50" type="text"
                                            v-model="templateForm.content.name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">分类:</label>
                                    <div class="col-xs-10 col-sm-8">
                                        <div class="input-group">
                                            <input class="form-control" size="50" name="" type="text" value=""
                                                v-model="templateForm.content.category_name" disabled>
                                            <div class="input-group-addon no-border no-padding">
                                                <button class="btn-primary btn chooseCategory">
                                                    选择
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">图片:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group">
                                            <input data-rule="" class="form-control" size="50" name="" type="text"
                                                value="" v-model="templateForm.content.image">
                                            <div class="input-group-addon no-border no-padding">
                                                <button type="button" class="btn-primary btn choosePicture"
                                                    :data-index="'group'">
                                                    选择
                                                </button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-12">
                                        <div class="input-group">
                                            <img :src="templateForm.content.image" alt="" srcset="" style="width:100%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="select-style" v-if="templateForm.type=='goods-list'">
                            <div class="form-item">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">名称:</label>
                                    <div class="col-xs-10 col-sm-8">
                                        <input class="form-control" size="50" type="text"
                                            v-model="templateForm.content.name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">商品列表:</label>
                                    <div class="col-xs-10 col-sm-8">
                                        <div class="input-group">
                                            <input class="form-control" size="50" name="" type="text" value=""
                                                v-model="templateForm.content.ids" disabled>
                                            <div class="input-group-addon no-border no-padding">
                                                <button data-multiple="true" class="btn-primary btn chooseGoods">
                                                    选择
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">图片:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group">
                                            <input data-rule="" class="form-control" size="50" name="" type="text"
                                                value="" v-model="templateForm.content.image">
                                            <div class="input-group-addon no-border no-padding">
                                                <button type="button" class="btn-primary btn choosePicture"
                                                    :data-index="'group'">
                                                    选择
                                                </button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-12">
                                        <div class="input-group">
                                            <img :src="templateForm.content.image" alt="" srcset="" style="width:100%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="select-style" v-if="templateForm.type=='coupons'">
                            <div class="form-item">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">名称:</label>
                                    <div class="col-xs-10 col-sm-8">
                                        <input class="form-control" size="50" type="text"
                                            v-model="templateForm.content.name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">列表:</label>
                                    <div class="col-xs-10 col-sm-8">
                                        <div class="input-group">
                                            <input class="form-control" size="50" name="" type="text" value=""
                                                v-model="templateForm.content.ids" disabled>
                                            <div class="input-group-addon no-border no-padding">
                                                <button data-multiple="true" class="btn-primary btn chooseCoupons">
                                                    选择
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="select-style" v-if="templateForm.type=='groupon'">
                            <div class="form-item">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">名称:</label>
                                    <div class="col-xs-10 col-sm-8">
                                        <input class="form-control" size="50" type="text"
                                            v-model="templateForm.content.name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">列表:</label>
                                    <div class="col-xs-10 col-sm-8">
                                        <div class="input-group">
                                            <input class="form-control" size="50" name="" type="text" value=""
                                                v-model="templateForm.content.activity_name" disabled>
                                            <div class="input-group-addon no-border no-padding">
                                                <button class="btn-primary btn chooseGroupon">
                                                    选择
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="select-style" v-if="templateForm.type=='seckill'">
                            <div class="form-item">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">名称:</label>
                                    <div class="col-xs-10 col-sm-8">
                                        <input class="form-control" size="50" type="text"
                                            v-model="templateForm.content.name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">列表:</label>
                                    <div class="col-xs-10 col-sm-8">
                                        <div class="input-group">
                                            <input class="form-control" size="50" name="" type="text" value=""
                                                v-model="templateForm.content.seckill_name" disabled>
                                            <div class="input-group-addon no-border no-padding">
                                                <button class="btn-primary btn chooseSeckill">
                                                    选择
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="select-style" v-if="templateForm.type=='live'">
                            <div class="form-item">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">名称:</label>
                                    <div class="col-xs-10 col-sm-8">
                                        <input class="form-control" size="50" type="text"
                                            v-model="templateForm.content.name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">样式:</label>
                                    <div class="col-xs-12 col-sm-8">
    
                                        <div class="radio">
                                            <label for="row[status]-up"><input id="row[status]-up" type="radio"
                                                    v-model="templateForm.content.style" value="1"
                                                    :checked="templateForm.content.style === 1">1列</label>
                                            <label for="row[status]-hidden"><input id="row[status]-hidden"
                                                    name="row[status]" type="radio" value="2"
                                                    v-model="templateForm.content.style"
                                                    :checked="templateForm.content.style === 2"> 2列</label>
                                        </div>
    
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3">列表:</label>
                                    <div class="col-xs-10 col-sm-8">
                                        <div class="input-group">
                                            <input class="form-control" size="50" name="" type="text" value=""
                                                v-model="templateForm.content.ids" disabled>
                                            <div class="input-group-addon no-border no-padding">
                                                <button class="btn-primary btn  chooseLive">
                                                    选择
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div style="height:50px;
                background:#F2F2F6;
                box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.08);position: absolute;left: 0;bottom: 0;width: 100%;">

                </div> -->
            </div>
            <div class="col-sm-3 col-md-3 right-container">
                <div class="partTitle3">效果预览</div>
                <div class="right-container-iframe" style="height: calc(100vh - 130px);   ">
                    <iframe id="preview" :src="iframeSrc" frameborder="1" height="600px"></iframe>
                </div>
            </div>
        </div>
        <div class="form-group layer-footer">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
            </div>
        </div>
    </div>
</form>